[[ .StocksModuleNav ]]

<div id="app">
  <div class="row row-cols-1 row-cols-md-5 g-5">
    <div class="col" v-for="(item) of items">
      <div class="card" :class="{
        'bg-danger':item.quote.percent>0,
        'bg-success':item.quote.percent<0,
        'bg-secondary':item.quote.percent==0
      }">
        <h5 class="card-header">
          <a :href="'https://xueqiu.com/S/'+item.quote.symbol" target="_blank" style="color:white">
            {{item.quote.name}}
          </a>
        </h5>
        <div class="card-body">
          <h5 class="card-title border-bottom">{{item.quote.percent + "%"}}</h5>
          <div class="card-text">
            <p>{{"今日：" + item.quote.current}}</p>
            <p>{{"最高：" + item.quote.high}}</p>
            <p>{{"最低：" + item.quote.low}}</p>
            <p>{{"昨收：" + item.quote.last_close}}</p>
          </div>
        </div>
      </div>
    </div>
  </div>

  <h3 id="xueqiuRetie" class="my-2">雪球热贴 <button type="button" @click="loadHq" class="btn btn-info btn-sm">刷新</button>
  </h3>

  <div class="row row-cols-1 row-cols-md-1 g-5">
    <div class="col">
      <ul class="list-group list-group-flush">
        <template v-for="row of xueqiu">
          <a class="text-muted p-4 list-group-item" target="_blank" :href="row.link" :title="row.title">
            {{row.content}}
          </a>
        </template>
      </ul>
    </div>
  </div>
</div>


<script>
  Vue.createApp({
    data() {
      return {
        items: [],
        xueqiu: [],
      }
    },
    mounted() {
      this.loadHq()
    },
    methods: {
      loadHq() {
        axios.get("/stocks/indexhq").then(response => {
          const res = response.data;
          if (res.flag) {
            var data = res.data;
            if (data) {
              this.items = data.data.items;
              this.xueqiu = res.xueqiu || [];
            }
          } else {
            console.error(res.msg);
          }
        });
      }
    }
  }).mount('#app')
</script>